"use client";

import { memo } from "react";
import { Mouse, MousePointer2 } from "lucide-react";
import { useOther } from "@/liveblocks.config";
import { connectionIdToColor } from "@/lib/utils";

/**
 * 定义了光标组件的属性接口
 */
interface CursorProps {
  connectionId: number; // 其他用户连接的唯一标识符
}

/**
 * Cursor 组件用于显示其他用户的光标位置和名称
 * 通过 useOther hook 获取其他用户的信息和光标位置
 * 使用 connectionIdToColor 函数将连接ID转换为颜色，以区分不同的用户
 * 
 * @param connectionId - 其他用户连接的唯一标识符
 * @returns {JSX.Element | null} - 返回光标组件的JSX结构，如果没有光标数据则返回null
 */
export const Cursor = memo(({ connectionId }: CursorProps) => {
  // 使用 useOther hook 获取其他用户的信息
  const info = useOther(connectionId, (user) => user?.info);

  // 使用 useOther hook 获取其他用户的光标位置
  const cursor = useOther(connectionId, (user) => user.presence.cursor);

  // 如果没有光标数据，则返回null
  if (!cursor) return null;

  // 解构光标位置的 x 和 y 坐标
  const { x, y } = cursor;

  // 获取用户的名称，如果没有则默认为 "Teammate"
  const name = info?.name || "Teammate";

  // 计算光标位置并应用样式，返回光标组件的JSX结构
  return (
    <foreignObject
      style={{
        transform: `translateX(${x}px) translateY(${y}px)`, // 根据光标位置调整光标组件的位置
      }}
      height={50} // 设置光标组件的高度
      width={name.length * 10 + 24} // 根据用户名长度动态调整光标组件的宽度
      className="relative drop-shadow-md" // 添加样式类，用于展示光标组件的阴影效果
    >
      <MousePointer2
        className="h-5 w-5" // 设置鼠标的图标大小
        style={{
          fill: connectionIdToColor(connectionId), // 根据连接ID转换的颜色设置图标的填充颜色
          color: connectionIdToColor(connectionId), // 根据连接ID转换的颜色设置图标的颜色
        }}
      />
      <div
        className="absolute left-5 px-1.5 py-0.5 rounded-md text-xs text-white font-semibold" // 设置用户名的样式类
        style={{
          backgroundColor: connectionIdToColor(connectionId), // 根据连接ID转换的颜色设置背景颜色
        }}
      >
    {name},  
      </div>
    </foreignObject>
  );
});

// 设置 Cursor 组件的 displayName，便于调试
Cursor.displayName = "Cursor";
